import React from 'react';
import ReactDOM from 'react-dom';
import { Toast, Result, Icon, WhiteSpace, Button, WingBlank, Modal } from 'antd-mobile';
import { Setting } from './components/Setting';
import Header from './components/Header';
import Footer from './components/Footer';

import Step1 from './components/Step1'
import Step2 from './components/Step2'
import Step2add from './components/Step2add'
import Step3 from './components/Step3'
import Step4 from './components/Step4'
import Step5 from './components/Step5'
import Step6 from './components/Step6'
import Step7 from './components/Step7'
import Step7add from './components/Step7add'
import Step8 from './components/Step8'
import Translate from './components/Translate';
// import Step8 from './components/Step8'

import 'whatwg-fetch';

import { createForm } from 'rc-form';

import './enroll.css';

const App = React.createClass({
	getInitialState() {
    return {
      mode: false,
    	currentPage: 1,
    	endPage:9,
      data: null,
      nativePlace:{
        addressArr:[],
        sheng:[],
        shi:[],
        xian:[],
        cols:1,
        oldAddress:''
      },
      politics:[],
      nation:[],
      school:[],
      specialty:[],
      selectVal:{
        ZJLX:'',
      }
    };
  },
	onClick: function(type){
    if( type === 'next' ){

      const node = document.getElementsByClassName('div-step-active')[0].getElementsByTagName('input');
      for( var i = 0 ; i < node.length; i++ ){
        // if( node[i].value.length == 0  && !node[0].getAttribute('data-name')){
        //   Toast.offline('请正确填写表单再点击下一步', 2);
        //   return false;
        // }
      }

  		if( this.state.currentPage == this.state.endPage) {
        this.uploadForm()
        return false;
      };

  		this.setState({
  			currentPage : this.state.currentPage+1
  		});

    }else{
      if( this.state.currentPage == 1) return false;
      this.setState({
        currentPage : this.state.currentPage-1
      })

    }
	},

  uploadForm: function() {
    Toast.loading('上传中', 600, '', true);
    const form = document.getElementById('myForm');
    const data = new FormData(form)
    data.append( 'enroll_id', sessionStorage.getItem( "enroll_id" ) )

    fetch( Setting.BaseUrl + "create-user-info" , {
      credentials: 'include',
      method: 'POST',
      mode: 'cors',
      headers: {
      },
      body: data
      }).then( function( resp) {
        return resp.json();
      }).then( function( json){
        if( json.success ){
          window.location.href = "personal.html"
        }else{
          Toast.offline( json.error , 2 );
        };
    })
  },

  render() {
    const tr = new Translate(this.state.translate);

    if (this.state.mode === 'edit') {

      return (
      <div className="container" id="container">
        <Header title="在线报名" leftContent="" backRemind={true} onBack={() => {
            Modal.alert('提示', '是否保存已经修改的内容?', [
              { text: '否', onPress: () => window.history.back() },
              {
                text: '是',
                onPress: () => this.uploadForm()
              },
            ])
          }
        } />
        <form id="myForm">

        	<Step1
                title = "报名须知"
                nodeName = { this.state.currentPage==1 ? "div-step-active" : "div-step"}
                data = {( this.state.data[0])? this.state.data[0]:''}
                record = {this.state.data}
                translate={tr}
                site = {this.state.site}
            />
            <Step2add
              title="证件号码"
              nodeName={this.state.currentPage == 2 ? "div-step-active" : "div-step"}
              record={this.state.data}
              translate={tr}
              site={this.state.site}
            />
        	<Step2
                title = "证件照"
                nodeName = { this.state.currentPage==3 ? "div-step-active" : "div-step"}
                data = {( this.state.data[1])? this.state.data[1]:''}
                record = {this.state.data}
                translate={tr}
                site = {this.state.site}
            />
        	{/* <Step3
                title = "个人身份证"
                nodeName = { this.state.currentPage==3 ? "div-step-active" : "div-step"}
                data = {( this.state.data[2])? this.state.data[2]:''}
                record = {this.state.data}
                translate={tr}
                site = {this.state.site}
            /> */}
        	<Step4
                title = "基本信息"
                nodeName = { this.state.currentPage==4 ? "div-step-active" : "div-step"}
                nativePlace = { this.state.nativePlace }
                politics ={ this.state.politics }
                changeCb = { this.changeCb }
                nation = { this.state.nation }
                selectVal = { this.state.selectVal }
                record = {this.state.data}
                translate={tr}
            />
          <Step5
            title="科研、奖励与实习经历"
            nodeName= { this.state.currentPage==5 ? "div-step-active" : "div-step"}
            record = {this.state.data}
                translate={tr}
          />
          <Step6
            title="GPA信息"
            nodeName={ this.state.currentPage==6 ? "div-step-active" : "div-step"}
            school = { this.state.school }
            specialty = { this.state.specialty }
            record = {this.state.data}
                translate={tr}
          />
          <Step7
            title="外语学习"
            nodeName={this.state.currentPage==7 ? "div-step-active" : "div-step"}
            record = {this.state.data}
          />
          <Step7add
              title="计算机水平"
              nodeName={this.state.currentPage == 8 ? "div-step-active" : "div-step"}
              record={this.state.data}
          />
          <Step8
            title="联系信息"
            nodeName={this.state.currentPage == 9 ? "div-step-active" : "div-step"}
            record = {this.state.data}
            user = {this.state.user}
                translate={tr}
          />
        </form>

      	<Footer
          onClick={this.onClick}
          contentLeft={this.state.currentPage==1 ? "":"上一步"}
          contentRight={this.state.currentPage==this.state.endPage ? "完成":"下一步"}
          rightIcon={this.state.currentPage < this.state.endPage}
        />

      </div>);

    } else if (this.state.mode === 'result') {
      return (<div className="container" id="container">
        <Header title="在线报名" leftContent="" backRemind={true}/>
        <WingBlank>
          <div>
            <Result
              img={<Icon size="lg" type={require('./svg/complete.svg')} className="icon" style={{width: '1.2rem', height: '1.2rem'}}/>}
              title="已录入"
              message="个人基本信息已经录入完成"
            />
          </div>
          <WhiteSpace size="lg" />
          <Button className="btn" type="ghost" onClick={()=>this.setState(Object.assign({}, this.state, {mode: "edit"}))}>编辑</Button>
        </WingBlank>
      </div>);
    } else {
      return (<div className="container" id="container">
        <Header title="在线报名" leftContent="" backRemind={true} />
        <div style={{textAlign: 'center'}}>
          <Icon type="loading" size="lg" />
        </div>
      </div>);
    }
  },

  componentDidMount(){
    const _this = this;
    fetch( Setting.BaseUrl + 'user-info', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then( function(resp) {

      return resp.json();
    }).then( function(json) {
			console.log(json)
      const province = json.user_info.sheng,
            provinceArr = [];
      for( var i = 0 ; i < province.length ; i++ ){
        var obj = {
          value:province[i].SSDM,
          label:province[i].SSMC
        }
        provinceArr.push(obj);
      }

      const politics = json.user_info.zzmmm,
            politicsArr = [];
      for( var i = 0 ; i < politics.length ; i++ ){
        var obj = {
          value:politics[i].zzmmm,
          label:politics[i].zzmmmc
        }
        politicsArr.push(obj);
      }

      const nation = json.user_info.mzm,
            nationArr = [];
      for( var i = 0 ; i < nation.length ; i++ ){
        var obj = {
          value:nation[i].mzm,
          label:nation[i].mzmc
        }
        nationArr.push(obj);
      }

      const school = json.user_info.ben_school,
            schoolArr = [];
      for( var i = 0 ; i < school.length ; i++ ){
        var obj = {
          value:school[i].YXDM,
          label:school[i].YXMC
        }
        schoolArr.push(obj);
      }

      const specialty = json.user_info.zhuanye,
            specialtyArr = [];
      for( var i = 0 ; i < specialty.length ; i++ ){
        var obj = {
          value:specialty[i].ZYDM,
          label:specialty[i].ZYMC
        }
        specialtyArr.push(obj);
      }

      console.log(json.user_info.data);

      _this.setState({
        mode: json.user_info.data.id ? "result" : "edit",
        data:json.user_info.data || {},
        user:json.user_info.user || {},
        nativePlace:{
          addressArr: provinceArr,
          sheng:provinceArr,
          shi:[],
          xian:[],
          cols:1
        },
        politics:politicsArr,
        nation:nationArr,
        school:schoolArr,
        specialty:specialtyArr,
        translate: json.translate,
        site: json.site,
      })
    })
  }

})

ReactDOM.render(<App />, document.getElementById('example'));
